Add camera presets to the Sandbox - #18807
Conversation
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s). |
|
Building or testing the sandbox has failed. If the tests failed, results can be found here: |
|
Snapshot stored with reference name: Test environment: To test a playground add it to the URL, for example: https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/refs/pull/18807/merge/index.html#WGZLGJ#4600 Links to test your changes to core in the published versions of the Babylon tools (does not contain changes you made to the tools themselves): https://playground.babylonjs.com/?snapshot=refs/pull/18807/merge To test the snapshot in the playground with a playground ID add it after the snapshot query string: https://playground.babylonjs.com/?snapshot=refs/pull/18807/merge#BCU1XR#0 If you made changes to the sandbox or playground in this PR, additional comments will be generated soon containing links to the dev versions of those tools. |
|
You have made possible changes to the playground. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/18807/merge/ The snapshot playground with the CDN snapshot (only when available): Note that neither Babylon scenes nor textures are uploaded to the snapshot directory, so some playgrounds won't work correctly. |
|
Visualization tests for WebGPU |
|
WebGL2 visualization test reporter: |
⚡ Performance Test Results🟢 All performance tests passed — no regressions detected. |
🟢 Memory Leak Test Results4 passed, 0 leaked out of 4 scenarios 🟢 All memory leak tests passed — no leaks detected. Passed Scenarios (4)
|
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
Self code review completed by the code-review skill. Review fixes: adc03bf0c1
|
There was a problem hiding this comment.
Pull request overview
This PR adds end-user camera presets to the Babylon.js Sandbox, enabling saving/restoring camera configurations (including inputs and certain behaviors) and integrating preset management into the Inspector and the footer UI, with persistence via local storage.
Changes:
- Introduces
CameraPresetManagerfor serializing, persisting, restoring, and applying camera presets (plus behavior state forArcRotateCamera). - Adds an Inspector “Save Camera Preset” section and a footer “Select camera preset” dropup (including a “Default camera” recovery option).
- Expands unit + Playwright coverage for saving/applying presets, persistence across reloads, and URL override behavior.
Reviewed changes
Copilot reviewed 12 out of 13 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/tools/sandbox/src/tools/cameraPresetManager.ts | New preset storage, parsing, persistence, and apply/activate/deactivate logic for cameras + behaviors. |
| packages/tools/sandbox/src/tools/cameraPresetInspectorService.tsx | New Inspector service definition adding a “Save Camera Preset” section when a camera is selected. |
| packages/tools/sandbox/src/components/footer.tsx | Footer now tracks cameras/presets, adds camera preset selector UI, and cleans up observers on unmount. |
| packages/tools/sandbox/src/components/renderingZone.tsx | Applies active preset on scene loads (when appropriate), emits camera-changed events, and tracks texture-preview scenes. |
| packages/tools/sandbox/src/globalState.ts | Adds camera/preset-related global state, new observables, and wires Inspector service definitions into ShowInspector. |
| packages/tools/sandbox/src/sandbox.tsx | Tracks load-kind and “scene had cameras” flags; marks URL camera overrides as preset-override cases. |
| packages/tools/sandbox/src/components/reflectorZone.tsx | Updates onSceneLoaded payload to include load kind. |
| packages/tools/sandbox/src/scss/footer.scss | Adds .longest footer layout variant to accommodate the new control. |
| packages/tools/sandbox/src/main.ts | Adjusts dev-only inspector import to inspector/legacy/legacy. |
| packages/tools/sandbox/src/img/icon-camera-preset.svg | Adds new camera preset icon asset for the footer UI. |
| packages/tools/sandbox/test/unit/cameraPresetManager.test.ts | Adds unit tests for naming, parsing, persistence failures, and camera/behavior round-tripping. |
| packages/tools/sandbox/test/unit/footer.test.tsx | Adds unit test covering footer camera/preset control enablement and observer cleanup. |
| packages/tools/sandbox/test/interaction.sandbox.test.ts | Adds Playwright workflow covering saving/selecting/restoring presets and URL override interactions. |
Suppressed comments (2)
packages/tools/sandbox/src/tools/cameraPresetManager.ts:214
- Using
toLocaleLowerCase()makes name de-duplication dependent on the user's runtime locale (e.g. Turkish locale casing can change results). For stable, locale-independent comparisons here, usetoLowerCase()instead.
while (normalizedNames.has(`${baseName} ${suffix}`.toLocaleLowerCase())) {
suffix++;
packages/tools/sandbox/src/tools/cameraPresetManager.ts:203
- Using
toLocaleLowerCase()makes name de-duplication dependent on the user's runtime locale (e.g. Turkish locale casing can change results). For stable, locale-independent comparisons here, usetoLowerCase()instead.
if (!normalizedNames.has(trimmedName.toLocaleLowerCase())) {
return trimmedName;
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
|
Building or testing the sandbox has failed. If the tests failed, results can be found here: |
|
Building or testing the playground has failed. If the tests failed, results can be found here: |
⚡ Performance Test Results🟢 All performance tests passed — no regressions detected. |
|
Visualization tests for WebGPU |
|
WebGL2 visualization test reporter: |
🟢 Memory Leak Test Results4 passed, 0 leaked out of 4 scenarios 🟢 All memory leak tests passed — no leaks detected. Passed Scenarios (4)
|
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
You have made possible changes to the playground. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/18807/merge/ The snapshot playground with the CDN snapshot (only when available): Note that neither Babylon scenes nor textures are uploaded to the snapshot directory, so some playgrounds won't work correctly. |
|
WebGL2 visualization test reporter: |
|
WebGL2 visualization test reporter: |
⚡ Performance Test Results🟢 All performance tests passed — no regressions detected. |
|
Visualization tests for WebGPU |
|
You have changed file(s) that made possible changes to the sandbox. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/SANDBOX/refs/pull/18807/merge/ |
🟢 Memory Leak Test Results4 passed, 0 leaked out of 4 scenarios 🟢 All memory leak tests passed — no leaks detected. Passed Scenarios (4)
|
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
Compatibility hardening added in Dynamic bundle compatibility
Compatibility matrix
Validation: 59/59 Sandbox unit tests, Sandbox compile/deployment build, production-shaped 3/3 browser matrix, full format/lint/tree-shaking/side-effect checks, and independent review approval. |
|
Building or testing the playground has failed. If the tests failed, results can be found here: |
|
Building or testing the sandbox has failed. If the tests failed, results can be found here: |
|
WebGL2 visualization test reporter: |
|
Visualization tests for WebGPU |
⚡ Performance Test Results🟢 All performance tests passed — no regressions detected. |
🟢 Memory Leak Test Results4 passed, 0 leaked out of 4 scenarios 🟢 All memory leak tests passed — no leaks detected. Passed Scenarios (4)
|
|
You have made possible changes to the playground. https://snapshots-cvgtc2eugrd3cgfd.z01.azurefd.net/PLAYGROUND/refs/pull/18807/merge/ The snapshot playground with the CDN snapshot (only when available): Note that neither Babylon scenes nor textures are uploaded to the snapshot directory, so some playgrounds won't work correctly. |
|
Visualization tests for WebGPU |
⚡ Performance Test Results🟢 All performance tests passed — no regressions detected. |
|
WebGL2 visualization test reporter: |
🟢 Memory Leak Test Results4 passed, 0 leaked out of 4 scenarios 🟢 All memory leak tests passed — no leaks detected. Passed Scenarios (4)
|
|
Building or testing the sandbox has failed. If the tests failed, results can be found here: |
1 similar comment
|
Building or testing the sandbox has failed. If the tests failed, results can be found here: |
|
Building or testing the sandbox has failed. If the tests failed, results can be found here: |
## Summary - Document the new `cameraMinZ` and `cameraLowerRadiusLimit` Sandbox URL parameters - Describe validation ranges, scene-unit semantics, camera restrictions, and local-preset interaction - Add a working close-up inspection example Companion to BabylonJS/Babylon.js#18807. ## Validation - Full page serialized successfully through the production `next-mdx-remote` pipeline - Documented asset URL returns HTTP 200 Co-authored-by: Vicente Cartas Espinel <vicente.cartas@microsoft.com> Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
> 🤖 *This PR was created by the create-pr skill.* ## Summary - Revert Documentation PR #1609 while Babylon.js PR #18807 remains under discussion. - Remove the unpublished camera preset and `cameraMinZ` / `cameraLowerRadiusLimit` documentation from the live Sandbox page. ## Motivation The documentation was merged before the corresponding Babylon.js feature was accepted and merged. This keeps the published documentation aligned with the currently released Sandbox. The removed documentation should be re-landed once the implementation discussion in BabylonJS/Babylon.js#18807 is resolved and the feature is merged. ## Validation - `npm run validate:content` passed with 805 Markdown files and 0 errors. - `npm run build` passed and generated all 1,402 pages. - Documentation tests: 79/80 passed; the sole failure is the pre-existing Windows path-separator assertion in `content-graph.test.ts`. - Revert independently reviewed and verified byte-exact against squash commit `5cdc704f` from #1609. Co-authored-by: Vicente Cartas Espinel <vicente.cartas@microsoft.com>
Summary
Default camerarecovery optioncameraMinZandcameraLowerRadiusLimitURL parameters for large-scene debuggingMotivation
The Sandbox's conservative camera limits work well for product-scale assets, but make it difficult to inspect large scenes such as cities. User-defined presets provide a reusable local workflow, while explicit numeric URL limits let admin/debug links work immediately in a clean browser without changing defaults for occasional Sandbox users.
Related discussion: https://forum.babylonjs.com/t/debugging-large-scenes-in-sandbox/63955
Companion documentation: BabylonJS/Documentation#1609
Versioned runtime compatibility
?version=8.40.1runs the current Sandbox application bundle against the Babylon.js8.40.1dependency set, including Inspector V2; it does not load a historical Sandbox application.8.40.1is the oldest runtime for which the Sandbox bootstrap selects Inspector V2. The full save-and-activate workflow is directly validated against8.40.1,8.51.0, and current.8.40.1. The Sandbox still detects each capability at runtime; if any are absent, Inspector opens normally without theSave Camera Presetsection.DataStorage.ReadString/WriteStringAPI becauseReadJson/WriteJsonwere introduced after8.40.1.URL parameters
cameraMinZ=<number>sets the near clipping plane on the final active camera. The value must be finite and greater than0.cameraLowerRadiusLimit=<number>sets the minimum orbit radius when the final active camera is anArcRotateCamera. The value must be finite and greater than or equal to0.Valid numeric camera settings suppress an active browser-local preset for the first model load without deleting it. The numeric limits continue to apply to later model loads or
Rreloads while the page remains open, even if the saved preset resumes.Example:
https://sandbox.babylonjs.com/?asset=https://assets.babylonjs.com/meshes/boombox.glb&cameraMinZ=0.01&cameraLowerRadiusLimit=0Validation
Rreload persistence, invalid values, embedded cameras, URL precedence, and texture previewsScreenshots
Saving a camera preset
When you have presets, they appear on the bottom right UI:
URL overrides for min z and lower radius limit:
